<template>
	<!-- 经销商授权申请单 -->
	<view class="form-container">
		<view class="cont-top">
			<view class="cell-title">工单编号: {{ bussiness.docNumber }}</view>
			<view class="cel">
				<view class="cell">经办人: {{ bussiness.approvalUserName }}</view>
				<view class="cell">经办人部门: {{ bussiness.approvalDept }}</view>
				<view class="cell">发起人: {{ bussiness.applyUserName }}</view>
			</view>
		</view>
		<uni-forms ref="form" :rules="rules" class="form-box">
			<my-form-auto :list="noGroupList" :formData="formData" ref="autoForm" :meth="meth"></my-form-auto>
			<!-- 标题 -->
			<view class="grace-header" v-if="formJson.tags.length > 0">
				<graceNav :items="formJson.tags" :currentIndex="activeTagId" @change="navChange" activeLineWidth="115rpx"
				 :activeLineMarginLeft="5" textAlign="ceter" activeLineBg="#19b552" activeColor='#19b552' fontSize="30rpx" :size="140"
				 :isCenter='false'></graceNav>
			</view>
			<my-form-auto :list="list" :formData="formData" ref="autoForm" :meth="meth"></my-form-auto>
			<!-- 子表单 start-->
			<customer-product style="margin-top: 15px;" :list="customerList" :OldDepart="formData.OldDepart" ></customer-product>
			<!-- 子表单 end -->
		</uni-forms>
		<view class="btn-box">
			<button type="default" @click="save">提交</button>
		</view>
	</view>
	
</template>

<script>
	import {Url,bpmUrl} from "@/common/config.js"
	import graceNav from '@/components/graceNavBar.vue'
	import MyFormAuto from '@/components/my-form-auto/my-form-auto.vue'
	import {ajax,getUserInfo} from '@/common/common.js'
	import $meth from './index.js'
	import CustomerProduct from './plug/om-customer-product-plug/index.vue'
	export default {
		data() {
			return {
				meth: $meth,
				src: '',
				activeTagId: '',
				noGroupList: [],
				list: [],
				formData: {},
				bussiness:{}, // 业务字段
				formJson: {
					tags: [],
					list: []
				},
				customerList: [],
				subforms: [],
				processid: '',
				user: null,
				searchField: {
					current: 1,
					size: 9999,
					pageData: {
						fkProcess: ''
					}
				},
				bpmSearch: {
						paramasMap: {},
						headersMap: {
							sysid: "bpm",
							syspwd: "pass",
							userid: ''
						},
						url: ''
				},
				rules: {
					number: {
						// name 字段的校验规则
						rules:[
								// 校验 name 不能为空
								{
										required: true,
										message: '请填写姓名',
										trigger: 'blur'
								}
						]
				}
				}
			}
		},
		onLoad(opt) {
			this.processid = 'aed22982027190478c0a45b08be2875d6b48'
			this.searchField.pageData.fkProcess = this.processid
			this.user = getUserInfo()
			this.initBussinessField(this.getItem)
			this.initI18n()
			// 重写模糊搜索方法 需要把主表单值传递过去
			this.meth["getCustomerName"] = (queryString, cb) => {
				$meth.getCustomerNameQuery(queryString, this.formData, cb)
			}
		},
		computed: {
			i18n() {
				return this.$t('form')
			}
		},
		components:{
			MyFormAuto,
			graceNav,
			CustomerProduct
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n.app_store
			});
		},
		methods: {
			//加载中英文
			initI18n(){
				ajax({
					url: '/internation/listPage',
					method: 'POST',
					data: this.searchField,
					success: res => {
						console.log('18n',res)
						let cnObj = {};
						let enObj = {};
						let data = res.data.data;
							data.forEach((item) => {
								cnObj[item.uuid] = item.cnName;
								enObj[item.uuid] = item.enName;
							});
							let cn = this._i18n.messages["zh_CN"]
							cn.form = cnObj
							let en = this._i18n.messages["en"]
							en.form = enObj
							this._i18n.setLocaleMessage("zh_CN",cn)
							this._i18n.setLocaleMessage("en", en)
					},
					fail: res => {
						console.log(res)
						Tips.toast('获取失败','none')
						Tips.loaded()
					},
					complete:res=>{
						console.log(res)
					}
				})
			},
			// 选项卡切换
			navChange(id) {
				this.activeTagId = id
				let list = this.formJson.list;
				this.list = list.filter(
					(item) => item.hidden === "0" && item.groupa == id
				);
			},
			//获取字段列表
			getItem(){
				ajax({
					url: "/formGroup/listPage",
					method: "POST",
					data: this.searchField,
					success: res => {
						this.formJson.tags = res.data.data
					}
				})
				ajax({
					url: "/formField/getByProcessId/"+ this.processid,
					method: 'GET',
					success:res => {
						let arr = res.data
						
						this.formJson.list = arr.map((item) => {
							item.rules = JSON.parse(item.rules);
							item.optiona = JSON.parse(item.optiona);
							item.showPicker = item.showPicker === 0 ? false : true;
							return item;
						});
						//js加载赋值
						this.formJson.list = $meth.formonload(this.formJson.list,this.formData,this.bussiness)
						let tags = this.formJson.tags;
						let list = this.formJson.list;
						let show = false;
						if (tags.length > 0) {
							this.activeTagId = tags[0].id;
							show = true;
							this.noGroupList = list.filter(item => item.hidden === "0" && !item.groupa)
						}
						if (show) {
							this.list = list.filter(
								(item) => item.hidden === "0" && item.groupa === this.activeTagId
							);
						} else if (!show) {
							this.list = list.filter((item) => item.hidden === "0");
						}
					}
				})
			},
			//填充业务字段
			initBussinessField(call){
				let params = {
					paramasMap : {
						 processId: this.processid,
					},
					headersMap: {
						sysid: "bpm",
						syspwd: "pass",
						userid: this.user.bpmUid
					},
					url: bpmUrl + "/rest/task/nextnode/detail"
				};
				ajax({
					url: '/bpm/get',
					method: 'POST',
					data: params,
					success: res => {
						this.bussiness = res.data.data
						console.log('bussiness', this.bussiness)
						call()
					}
				})
			},
			//表单提交
			save(){
				console.log(this.formData)
				$meth.formonsubmit(this.formData,this.list,this.bussiness)
			}
		}
	}
</script>

<style lang="scss">
.grace-header{
	background: #fff;
	padding-top: 30rpx;
}
.form-container{
	padding-bottom: 60px;
	background: rgba(0, 167, 60, 0.19);
}

.btn-box{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
.cont-top {
			font-size: 26rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-flow: column;

			.cell-title {
				color: #2BAD4C;
				margin-bottom: 20rpx;
			}

			.cel {
				padding: 15rpx;
				display: flex;
				flex-flow: wrap;
				justify-content: flex-start;

				.cell {
					width: 50%;
					color: #3A3A3A;
					line-height: 50rpx;
					// margin-bottom: 30rpx;
				}
			}
		}
</style>
